<template>
	<view class="page">
		<scroll-view class="scroll-view" scroll-y :refresher-enabled='false'
			@scroll="handleScrollEvent">
			<!-- 导航栏 -->
			<Navbar :scroll-top="scrollTop"></Navbar>
			<!-- 用户基本信息 -->
			<Userinfo></Userinfo>
			<!-- 菜单 -->
			<Menu></Menu>
		</scroll-view>

		<!-- 底部标签栏 -->
		<c-customer-tabbar class="tabbar" :index="4"></c-customer-tabbar>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import Navbar from './components/navbar.vue';
	import Userinfo from './components/userinfo.vue';
	import Menu from "./components/menu.vue";
	
	// 滚动距离
	const scrollTop = ref(0);
	// 页面滚动事件
	const handleScrollEvent = (e) => {
		scrollTop.value = e.detail.scrollTop
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.scroll-view {
			flex-grow: 1;
			position: relative;
			z-index: 1;
			height: 0;
		}

		.tabbar {
			flex-shrink: 0;
		}
	}
</style>